* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  display: grid;
  border: #41d5f6 10px solid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] 100px [r5];
  gap: 20px 20px;
  /* 自定义网格区域 */
  grid-template-areas: 'a a a' 'b a b' 'b b b';
  /* grid-auto-flow: dense; */
  /* place-items: center; */
}
.item {
  font-size: 2rem;
  color: whitesmoke;
}
.item-1 {
  background-color: #ec5d3d;
  /* grid-column-start: 1;
  grid-column-end: 3; */
}
span {
  height: 100%;
  display: grid;
  place-items: center;
}
.item-2 {
  background-color: #f1a145;
  /* grid-column: 1/3; */
}
.item-3 {
  background-color: #64a256;
  /* grid-column-start: span 2; */
  /* grid-column-end: span 2; */
}
.item-4 {
  background-color: #3478c6;
  /* grid-column: 1 / 3;
  grid-row: 2 / 4; */
  grid-column: span 2;
  grid-row: span 2;
}
.item-5 {
  background-color: #c18eb5;
}
.item-6 {
  background-color: #f6daab;
}
.item-7 {
  background-color: #beb08c;
}
.item-8 {
  background-color: #d7e3b5;
}
.item-9 {
  background-color: #6ec2ec;
}
.item-10 {
  background-color: #e84f70;
}
